<template>
  <div>
    <div id="productsHeadMap" class="headMap" style="max-width: calc(100vw - 220px);height:900px;padding-left: 30px"></div>`
  </div>

</template>

<script>
// prettier-ignore
import * as echarts from 'echarts';
import request from "@/utils/request";

const option = {
  title: {
    text: '文创产品价格与总销量热力图',
    textStyle:{
      fontSize:30,
    },
    itemGap:15,
    left:'center'
  },
  tooltip: {
    position: 'top',
    // formatter:'价格',
  },
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    name:'价格',
    type: 'category',
    data:[],
    splitArea: {
      show: true
    },
    axisLabel:{
      textStyle:{
        fontSize:12,
        fontWeight:12,
        color:'#30cee3'
      },
    }

  },
  yAxis: {
    name:'产品类别',
    type: 'category',
    data: [],
    splitArea: {
      show: true
    },
    axisLabel:{
      textStyle:{
        fontSize:20,
        fontWeight:20,
        color:'#30cee3'
      },
    }
  },
  visualMap: {
    text:['销量'],
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '25%'
  },
  toolbox: { // 工具栏
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: '产品价格与销量',
      type: 'heatmap',
      data: [],
      label: {
        show: true,
        textStyle:{
          fontSize:20,
          fontWeight:30,
          color:'#8325ef'
        },
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
    }
  ]
};

export default {
  name: "ProductsHeatMap",
  components:{},
  data(){
    return{
      lineBox:null,//初始化作用
      PriceAndSales:[],
      productType:[],
      totalData:[],
      tempData:[],
      params: {
        pageNum: 1,
        pageSize: 1000,
        name: '',
        price:''
      },
    }
  },
  mounted() {
    this.lineBox = echarts.init(document.getElementById('productsHeadMap'))
    this.initEchart()
  },
  methods:{
    initEchart(){
      //获取y轴数据
      request.get('/producttype/page',{
        params:this.params
      }).then(res => {
        if(res.code === '200') {
          res.data.list.forEach((item) =>{
            item.children.forEach((i) =>{
              this.productType.push(i.name)//还得获取categoryId
            })
          })
          this.typeName=this.productType //y轴数据
          option.yAxis.data=this.productType
          this.lineBox.setOption(option);

          // console.log(' option.yAxis.data', option.yAxis.data)
          this.total = res.data.total
        }
      })

      //x轴数据 + 销量
      request.get('/products/page',{
        params:this.params
      }).then(res => {
        if(res.code === '200') {
          // console.log("list内偶人",res.data.list)
          res.data.list.forEach((item) => {
            this.PriceAndSales.push(item.price) //获取销量
          })
          //x轴数据
          let arr = Array.from(new Set(this.PriceAndSales))
          // arr.sort()
          this.price = arr
          option.xAxis.data=arr.sort(function(a, b){return a - b})
          // console.log('option.xAxis.data',option.xAxis.data)
          // console.log("x轴this.price里数据是",this.price)
          // console.log("y轴this.typeName数据是",this.typeName)
          if (!this.lineBox) {// 初始化echarts容器
            console.log("这里未初始化")
          } else {
            request.get('/products/page', {
              params: this.params
            }).then(res => {
              if (res.code === '200') {
                res.data.list.forEach((item) => {
                  let tmp = []
                  // this.getArrId(item.price) x轴
                  let arrId=0
                  this.price.forEach((i) => {
                    if(item.price == i){
                      //x轴数据
                      tmp.push(arrId)
                    }
                    arrId ++
                  })
                  // this.getTypeNameId(item.categoryName) y轴
                  let typeNameId=0
                  this.typeName.forEach((i) =>{
                    if(i == item.categoryName){
                      // y轴数据
                      tmp.push(typeNameId)
                    }
                    typeNameId ++
                  })
                  tmp.push(item.sales)
                  this.totalData.push(tmp)
                })
                // console.log("this.tempData数据是",this.totalData)
                option.series[0].data=this.totalData.map(function (item) {
                  return [item[0], item[1], item[2] || '-'];
                })
                this.lineBox.setOption(option);
              }
            })
          }
        }
      })

    },
  }
}
</script>

<style scoped>

</style>